import React from 'react'
import debounce from 'lodash.debounce'
import PropTypes from 'prop-types'
import ColMatchItem from './ColMatchItem'

class TableFooter extends React.Component {
  state = {
    scrollLeft: 0
  }
  componentDidMount() {
    // console.log('componentDidMount================= ')
    // console.dir(this.footer)
    // console.dir(this.footer.parentElement.parentElement.children[0])
    // console.dir(this.footer.parentElement.previousElementSibling)
    let contentElement = this.footer.parentElement.previousElementSibling;
    // let targetColumn = contentElement.querySelector('.special5');
    // let offsetLeft = targetColumn.offsetLeft;
    this.scrollCb = debounce(() => {
      // console.log('scroll scroll', contentElement.scrollLeft)
      this.setState({
        scrollLeft: contentElement.scrollLeft,
      })
    }, 10)
    contentElement.addEventListener('scroll', this.scrollCb)
    window.addEventListener('resize', this.scrollCb)
    this.contentElement = contentElement
  }
  componentWillUnmount() {
    // console.log('componentWillUnmount ===================')
    this.contentElement.removeEventListener('scroll', this.scrollCb)
    window.removeEventListener('resize', this.scrollCb)
    this.contentElement = null
  }
  setFooterRef = (element) => {
    this.footer = element
  }
  render() {
    const { scrollLeft } = this.state
    const { footerCols, className, style } = this.props
    // console.dir(this.footer && this.footer.parentElement.parentElement.children[0])
    return (
      <div
        ref={this.setFooterRef}
        className={className}
        style={style}
      >
        {
          footerCols.map(item => <ColMatchItem
            targetColClass={item.targetColClass}
            scrollLeft={scrollLeft}
            key={item.targetColClass}
            style={item.style}
          >
            {item.content}
          </ColMatchItem>)
        }
      </div>
    )
  }
}
TableFooter.propTypes = {
  footerCols: PropTypes.arrayOf(PropTypes.shape({
    targetColClass: PropTypes.string.isRequired,
    content: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.number,
      PropTypes.node
    ]).isRequired
  })).isRequired
}
export default TableFooter
